<template>
    <div class="modalComponent" v-if="isShow">
        <div class="mask" @click="closeModal()"></div>
        <div class="main">
            <div class="tit">
                <p>{{title}}</p>
            </div>
            <div class="nameSet" v-if="plantType !== 2">
                <el-input v-model="tempTit" placeholder="请输入标题"></el-input>
            </div>
            <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="tempMain"></el-input>
            <div class="resultBtn">
                <el-button type="primary" @click="resultOk()">确定</el-button>
                <el-button type="primary" @click="closeModal()">返回</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "CModal",
    data() {
        return {
            a: 0,
            isShow: false,
            title: "",
            data: {},
            type: "",
            tempTit: "",
            tempMain: ""
        };
    },
    props: ["plantType"],
    methods: {
        closeModal() {
            this.isShow = false;
        },
        openModal(data) {
            if (data) {
                // 修改信息时操作
                this.type = "alter";
                this.title = "修改信息";
                this.data = data;
                if (this.plantType !== 2) {
                    this.tempTit = this.data.poetryTit;
                    this.tempMain = this.data.poetryMain;
                } else {
                    this.tempMain = this.data.main;
                }
            } else {
                // 添加信息时操作
                this.tempTit = "";
                this.tempMain = "";
                this.type = "add";
                this.title = "添加信息";
            }
            this.isShow = true;
        },
        resultOk() {
            if (this.type === "add") {
                // 添加信息调用方法
                if (this.plantType !== 2) {
                    this.data.poetryTit = this.tempTit;
                    this.data.poetryMain = this.tempMain;
                    if (this.data.poetryTit === "") {
                        this.$message({
                            message: "请输入正确的标题",
                            type: "warning"
                        });
                        return;
                    }
                    if (this.data.poetryMain === "") {
                        this.$message({
                            message: "请输入正确的内容",
                            type: "warning"
                        });
                        return;
                    }
                } else {
                    this.data.main = this.tempMain;
                }
                this.$emit("clickAdd", this.data);
            } else {
                // 修改信息调用方法
                if (this.plantType !== 2) {
                    this.data.poetryTit = this.tempTit;
                    this.data.poetryMain = this.tempMain;
                } else {
                    this.data.main = this.tempMain;
                }
                this.$emit("clickUpdata", this.data);
            }
        }
    }
};
</script>

<style lang="scss">
.modalComponent {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    .mask {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        background: rgba(0, 0, 0, 0.7);
        z-index: 2;
    }
    .main {
        margin: 50px auto 0;
        padding: 10px 40px;
        width: 420px;
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        position: relative;
        z-index: 3;
        .tit {
            font-size: 20px;
            font-weight: 500;
        }
        .nameSet {
            margin: 10px 0;
        }
        .resultBtn {
            margin: 10px 0;
        }
    }
}
</style>
